<%-- 
    Document   : register.jsp
    Created on : Apr 11, 2012, 5:00:54 AM
    Author     : Mr. Hung
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" media="all" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <title>Befriends Website</title>
    </head>
    <body>
        <!--        Now for testing new body code-->
        <div id="headbar-wrap">
            <div id="head-bar">
                <h1>
                    <a href="">Befriend</a>
                </h1>
                <ul class="main-2-menu">
                    <div id="login">
                        <form action="Login" method="post">
                            <input type="text" name="username" autofocus="true" placeholder="Username" value="${requestScope.account.username}">
                            <input type="password" name="password" placeholder="&#8226&#8226&#8226&#8226&#8226&#8226&#8226&#8226&#8226&#8226" onKeyPress = "return press_enter(this,event)" value="${requestScope.account.password}">
                            <input type="button" value="Login"  onclick="validate_login(this.form)">
                            <p><font color="crimson">${message}</font></p>
                        </form>
                        
                        <script type="text/javascript">
                            function press_enter(field,event)
                            {
                                var keycode;
                                if (window.event) keycode = window.event.keyCode;
                                else if (event) keycode = event.which;
                                else return true;

                                if (keycode == 13)
                                {
                                    field.form.submit();
                                    return false;
                                }
                                else
                                    return true;
                            }
                        </script>

                        <script type="text/javascript">
                            function validate_login(form) {
                                if (form.username.value == "") {
                                    alert("Please input username");
                                }
                                else if (form.password.value == "")  {
                                    alert("Please input password");
                                } 
                                else {
                                    form.submit();
                                }
                            }
                        </script>
                    </div>
                </ul>
            </div>
        </ul>
    </div><!--end div#head-bar -->
    <div id="header_bg">

    </div>


    <div id="wrapper">

        <div id="content_wrapper"><span class="top"></span><span class="bottom"></span>
            <div id="content">
                <h5>Please input information following:</h5>
                <form action="RegisterToWeb" method="post">
                    <table cellspacing="3" cellpadding ="5">
                        <tr>
                            <td>Username</td>
                            <td><input type="text" size="25" name="username" value="${requestScope.account.username}"></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td><input type="password" size="25" name="password" value="${requestScope.account.password}"</td>
                        </tr>
                        <tr>
                            <td>Email address</td>
                            <td><input type="text" name="emailAddress" size="25" value="${requestScope.account.emailAddress}"</td>
                        </tr>
                        <tr>
                            <td>Gender</td>
                            <td>
                                <input type="radio" name="gender" value="male" checked>Male
                                <input type="radio" name="gender" value="female">Female
                            </td>
                        </tr>
                        <tr>
                            <td>Birthday</td>
                            <td>
                                <select name="day" >
                                    <option>Day</option>
                                    <c:forEach begin="1" end="30" varStatus="status">
                                        <option>${status.index}</option>
                                    </c:forEach>
                                </select>

                                <select name="month" >
                                    <option>Month</option>
                                    <c:forEach begin="1" end="12" varStatus="status">
                                        <option>${status.index}</option>
                                    </c:forEach>
                                </select>

                                <select name="year">
                                    <option>Year</option>
                                    <c:forEach begin="1970" end="2006" varStatus="status">
                                        <option>${status.index}</option>
                                    </c:forEach>
                                </select>
                            </td>                
                        </tr>

                        <tr>
                            <td></td>
                            <td><input type="button" value="Submit" onclick="validate_register(this.form)"></td>
                        </tr>
                    </table>
                </form>

                <script type="text/javascript">
                    function validate_register(form) {
                        if (form.username.value == "") {
                            alert("Please fill Username");
                        }
                        else if (form.password.value == "") {
                            alert("Please fill Password");
                        }
                        else if (form.emailAddress.value == "") {
                            alert("Please fill Email address");
                        }
                        else if (form.day.value == "Day" || form.month.value == "Month" ||
                            form.year.value == "Year") {
                            alert("Please choose birthday"); 
                        } 
                        else {
                            form.submit();
                        }
                    } 
                </script> 


            </div> <!-- end of content -->

            <div id="sidebar">

                    <a href="register.jsp">
                        <img src="images/shin.jpg" alt="Site Title"  width="250" height="250" />
                </a> </div>

            <div class="cleaner"></div>
        </div> <!-- end of content_wrapper -->


    </div> <!-- end of wrapper -->

<c:import url="/footer.jsp"/>
</body>
</html>

